<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>

            thead td .layui-icon {
                vertical-align: middle;
            }

            .ew-tree-table-td-single{
            overflow:visible
            }
            .ew-tree-tips {
                overflow:visible!important
            }

        </style>
    </head>

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <label>分类名称</label>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="分类名" name="name"></div>
                                <label>父级</label>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="fid">

                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="add"><i class="layui-icon"></i>增加</button>
                                </div>
                            </form>
                            <hr>
                            <blockquote class="layui-elem-quote"></blockquote>
                        </div>

                        <script type="text/html" id="model-fromid">
                            <select data-value="{{d.fromid}}"   typeid="{{d.id}}" lay-filter="fromid" name="fromid">

                            </select>
                        </script>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="demoTreeTableBar1">
                            <button   lay-event="del" {{d.id==1000 ? 'class="layui-btn layui-btn-disabled" disabled':'class="layui-btn"'}}>删除</a>
                        </script>

                        <!-- 表格状态列 -->
                        <script type="text/html" id="demoTreeTableState1">
                            <input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
                                   lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
                        </script>
                        <div class="layui-card-header">
                            <!--<button class="layui-btn layui-btn-danger" onclick="delAll()">-->
                                <!--<i class="layui-icon"></i>批量删除</button>-->
                        </div>
                            <table id="demoTreeTable1"></table>

                    </div>
                </div>
            </div>
        </div>
        <script>
            layui.config({
                base: './'
            }).extend({
                treeTable: 'treeTable/treeTable'
            }).use(['layer', 'util', 'treeTable','form'], function () {
                var $ = layui.jquery;
                var ops="<option value='0' ></option>\n"
                $.ajaxSettings.async = false;
                $.post(
                    "/lengmou/goodstype/getAll",
                    function (data) {
                        var types = data.types;
                        for(var index in types){
                            ops+='<option value = "' + types[index].id + '">' + types[index].name + '</option>\n';
                        }
                    },"json"
                );
                $.ajaxSettings.async = true;
                $("select[name='fid']").html(ops);
                var layer = layui.layer;
                var util = layui.util;
                var treeTable = layui.treeTable;
                var form = layui.form;

                // 渲染表格
                var insTb = treeTable.render({
                    elem: '#demoTreeTable1',
                    tree: {
                        iconIndex: 1,  // 折叠图标显示在第几列
                        isPidData: true,  // 是否是pid形式数据
                        idName: 'id',  // 自定义id字段的名称
                        pidName: 'fromid',  // 自定义标识是否还有子节点的字段名称
                        haveChildName: 'haveChild',  // 自定义标识是否还有子节点的字段名称
                    },
                    cols: [
                        {field:'id',type: 'checkbox'},
                        {field: 'name', title: '分类名称', edit:'text'},
                        {field: 'id', title: 'ID'},
                        {field: 'fromid', title: '父级' ,templet:'#model-fromid'}
                        ,{title:'操作',templet:'#demoTreeTableBar1'}
                    ],
                    reqData: function(data, callback) {
                        // 在这里写ajax请求，通过callback方法回调数据
                        $.get('/lengmou/goodstype/getAll', function (res) {

                            callback(res.types);  // 参数是数组类型
                            // $("select[name='fromid']").html(options);
                            layui.each($("select[name='fromid']"), function (index, item) {
                                var elem = $(item);
                                var options = "";
                                $.ajaxSettings.async = false;
                                $.post(
                                    "/lengmou/goodstype/getAllFB",
                                    {
                                        id:elem.attr('typeid')
                                    },
                                    function (data) {
                                        var types = data.types;
                                        for(var index in types){
                                            options+='<option value = "' + types[index].id + '">' + types[index].name + '</option>\n';
                                        }
                                    },"json"
                                );
                                $.ajaxSettings.async = true;
                                elem.html(options);
                                console.log(elem.html());
                                elem.val(elem.data('value'));
                            });
                            layui.form.render();
                        });
                    },style: 'margin-top:0;'

                });
                $('#demoTreeTable1+div .ew-tree-table-box').css('overflow', 'visible');

                form.on('select(fromid)',function (data) {
                    var id=data.elem.attributes['typeid'].nodeValue;
                    var fromid= data.elem.attributes['data-value'].nodeValue;
                    console.log(data.elem); //得到select原始DOM对象
                    console.log(data.value); //得到被选中的值
                    console.log(data.othis); //得到美化后的DOM对象
                    if(fromid!=data.value){
                        layer.confirm("您确定要修改该类型的父类吗？", {icon: 3, title:'提示'}, function(index){
                            $.post(
                                "/lengmou/goodstype/setTypeFromid",
                                {
                                    id:id,
                                    fromid:data.value
                                },function (data) {
                                    if(data.state>0){
                                        layer.msg("修改成功");
                                    }else{
                                        layer.msg("修改失败")
                                    }
                                },"json"
                            );
                        },function (index) {
                            location.reload();
                        });
                    }
                });
                form.on('submit(add)',function (data) {
                    var value=data.field;
                    $.post(
                        "/lengmou/goodstype/addType",
                        {
                            name:value.name,
                            fromid:value.fid
                        },function (data) {
                            if(data.state==1){
                                layer.msg("添加成功");
                                location.reload();
                            }else if(data.state==-2){
                                layer.msg("添加失败,传递参数错误");
                            }else if(data.state==-1){
                                layer.msg("添加失败,已经存在相同名称的类型了");
                            }else{
                                layer.msg("添加失败,未知错误");
                            }
                        }
                    );
                    console.log(value);
                    return false;
                });

                treeTable.on('tool(demoTreeTable1)', function (obj) {
                    var event = obj.event;
                    if (event == 'del') {

                        var id= JSON.stringify(obj.data.id);
                        layer.confirm('您确定要删除吗？会删除子节点并且涉及类型的商品将修改为全部类型。', {icon: 3, title: '提示'}, function (index) {
                            $.ajax(
                                {
                                    type: 'POST',
                                    url: '/lengmou/goodstype/delete',
                                    data: {id:id},
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.state > 0) {
                                            layer.alert("操作成功", function () {
                                                location.reload();
                                            });
                                        } else if (data.state == -1) {
                                            layer.alert("操作失败，参数错误");
                                        }
                                    }
                                }
                            );
                            layer.close(index);

                        }, function (index) {
                            layer.close(index);
                        });
                    } else if (event == 'edit') {
                        layer.msg('点击了修改', {icon: 1});
                        obj.update({name: 'newname'});
                    }
                });
                treeTable.on('edit(demoTreeTable1)', function (obj) {
                    var value = obj.value, //得到修改后的值
                        data = obj.data //得到所在行所有键值
                        ,field = obj.field; //得到字段
                    layer.confirm('您确定修改类型：' + data.name + '吗？', {icon: 3, title: '提示'}, function (index) {
                        $.post(
                            "/lengmou/goodstype/setTypeName",
                            {
                                id:data.id,
                                name:value,
                            },function (data) {
                                if(data.state==1){
                                    layer.msg("修改成功")
                                }else if(data.state==-1){
                                    layer.msg("修改失败，该名称已被使用")
                                }else if(data.state==-2){
                                    layer.msg("该类型不存在，或者已经被删除");
                                }
                            }
                        );
                    });

                });

                /*用户-删除*/
                function member_del(obj, id) {
                    layer.confirm('确认要删除吗？', function (index) {
                        //发异步删除数据
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    });
                }
            });


   
        </script>
    </body>
</html>
